<template>
  <div>

<div>
    <el-row>
      <el-col :span="23" offset="1">
        <el-steps :space="1200" :active="1" finish-status="success" align-center>
        <el-step title="购物袋"></el-step>
        <el-step title='配送&支付'></el-step>
        <el-step title="确认"></el-step>
        </el-steps>
      </el-col>
    </el-row>
</div>
    <div>
       <el-row>
      <el-col :span="12" offset="4">
        <span v-if="flag">
          
          <el-table
            ref="multipleTable"
            :data="CartList"
            border
            tooltip-effect="dark"
            style="width: 100%; margin-top: 20px;"
            :cell-style="rowClass"
            @selection-change="handleSelectionChange">
            <!-- 选择 -->
            <el-table-column
            type="selection"
              width="60">
            </el-table-column>

            <el-table-column
              label="编号"
              width="50">
              <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
            </el-table-column>
            <el-table-column
              prop="product.productName"
              label="商品名">
            </el-table-column>
            <el-table-column
              prop="product.productPrice"
              label="单价（元）">
            </el-table-column>
            <el-table-column
              prop="count"
              label="数量（件）">
            </el-table-column>
            <el-table-column
              prop="subtotal"
              label="小计（元）">
            </el-table-column>
          </el-table>

        </span>
        <span v-else>
            <el-empty description="购物车为空"></el-empty>
        </span>
      </el-col>
      <el-col :span="7" offset="1" class="shoppingdiv1">
        <p>橙色礼盒</p>
        <hr/>
        <p>所有订单货品均使用橙色礼盒进行包装,特殊货品除外</p>
        <br>
      </el-col>
      <el-col :span="7" offset="1" class="shoppingdiv2">
        <p>客户服务中心</p>
        <hr/>
        <p>400 090 6610</p>
        <p>周一至周日: 10点 - 22点</p>
        <br>
      </el-col>
    </el-row> 
    </div>
    <el-row>
      <el-col :span="4" offset="12">
        <p>订单总金额:<span style="color:red">{{summationend}}</span>元</p>
      </el-col>
      <el-col :span="20"></el-col>
    </el-row>
    <el-row>
      
      <el-col :span="14" offset="8">
        <!-- 点击时触发，shiy -->
        <el-button type="success" @click="goPayIndex()">
          <!-- <router-link :to="{name:'payIndex',params:{id:1}}" style="text-decoration: none;color:white"> -->
            提交订单
          <!-- </router-link> -->
        </el-button>
      </el-col>
      <el-col :span="2"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  //在页面初始化时发送ajax请求后台数据
  created(){
    this.getCartList()
  },
    data(){
      return{
          user: JSON.parse(sessionStorage.getItem("user")),//用户信息
          CartList: [],//购物车列表数据
          flag:true,
          summationend: 0,//合计
          multipleSelection: [],//用户勾选的数据
          user: JSON.parse(sessionStorage.getItem("user")),
          productOrderVo: {
            title: "",
            price: 0,//总价格
            status: 0,//订单状态
            // pid: [],//商品id
            username: ""
          },
          arrs: [],//存储购物车商品id
          selectDate:[]//选中的数据
      }
    },
    methods: {
      goPayIndex(){

        //判断当前的订单金额是否小于零
        if(this.summationend < 0 || this.summationend === 0){

          this.$message({
              message: "请选择商品！",
              type: 'error'
            })

        }else{

          this.addProductOrder()//添加订单数据
          this.updateCart()//修改购物车商品状态

          this.$router.push({
            name:"payIndex",
            params:{
              summationend: this.summationend,//传递过去的商品总金额
            }
          })

          //如果走到这说明传递成功
          this.$message({
                message: '正在为您生成订单',
                type: 'success'
              })
        }

      },
      //修改购物车商品状态
      updateCart(){
          //发送ajax向后台修改数据
          let myarr = this.multipleSelection
        this.axios.post("http://localhost:8080/cart/updateCart",myarr)
        .then((res) => {
          console.log(res)
        });
      },
      rowClass() { //表格数据居中显示
        return "text-align:center"
      },
      addProductOrder(){

        let vm = this;//当前vue对象

        let summationend =  vm.summationend
        // let multipleSelection = vm.multipleSelection

        vm.productOrderVo.price = summationend;//价格
        vm.productOrderVo.username = this.user.username


        console.log(summationend)

        this.axios.post("http://localhost:8080/api/product/addProductOrder", vm.productOrderVo)
        .then((res) => {
          console.log(res)
        });
      },
    //获取购物车列表
      getCartList(){
        //拿到username
        let username = this.user.username
        this.axios.post("http://localhost:8080/cart/findByUid/" + username)
        .then((res) => {
          console.log(res)
          this.CartList = res.data.data.cartList
        });
        return true;
      },
      toggleSelection(rows) {
        console.log("aaaa")
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
            console.log(this.multipleSelection)
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //在点击选择器时触发
      handleSelectionChange(val) {
        this.summationend = 0;
        this.multipleSelection = val;
        //遍历该数组
        // let arr = [];//购物车表的id数组
        this.multipleSelection.forEach(row =>{
          console.log(row)
          this.arrs.push(row.id)
          this.summationend += row.subtotal
        })

        console.log("this.multipleSelection")
        console.log(this.multipleSelection)

      },

    },
}
</script>

<style scoped>
.shoppingdiv1{
    background-color: rgb(245, 248, 248);
}
.shoppingdiv2{
    margin-top: 10px;
    background-color: rgb(245, 248, 248);
}
.el-table td, .el-table th {
            text-align: center;
        }
</style>